<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="./js/dijit/themes/tundra/tundra.css"/>
        <style type="text/css">
            #container {
                border: 1px solid green;
                width: 960px;
                height: 600px;
            }
        </style>
    </head>
    <body class="tundra">
        <div id="container">
            <div id="treeContainer">
                <div id="treeStore" dojoType="dojo.data.ItemFileReadStore" url="./tree.json" jsId="treeStore">
                </div>
                <div id="myTree" dojoType="dijit.Tree" store="treeStore" query="{type:'continent'}" onfocus="console.log('user focus');" onblur="console.log('usr blur');" label="continents tree" openOnclick="true">
                    <script type="dojo/method" event="onClick" args="item">
                        console.log('Execute of node: ' + treeStore.getLabel(item)+' population='+treeStore.getValue(item,'population'));
                    </script>
                </div>
                <div dojoType="dijit.Tree" id="tree2" store="treeStore" query="{type:'continent'}" openonclick="true">
                    <script type="dojo/connect">
                        dojo.ready(function(){
                        var menu = dijit.byId("tree_menu");
						console.log( menu ); 
						
						var tree2 = dijit.byId('tree2');
						console.log(tree2.domNode);
                        // when we right-click anywhere on the tree, make sure we open the menu
                        menu.bindDomNode(tree2.domNode);
                        dojo.connect(menu, "_openMyself", tree2, function(e){
                        // get a hold of, and log out, the tree node that was the source of this open event
                        var tn = dijit.getEnclosingWidget(e.target);
                        console.debug(tn);
                        // now inspect the data store item that backs the tree node:
                        console.debug(tn.item);
                        // contrived condition: if this tree node doesn't have any children, disable all of the menu items
                        dojo.forEach(menu.getChildren(), function(i){ i.set('disabled', !tn.item.children); });
                        // IMPLEMENT CUSTOM MENU BEHAVIOR HERE
                        });
                        });
                    </script>
                    <script type="dojo/method" event="onClick" args="item">
                        alert("Execute of node " + treeStore.getLabel(item)
                        +", population=" + treeStore.getValue(item, "population"));
                    </script>
                </div>
            </div>
        </div>
        <div id="externalContainer">
            <div>
                <ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
                    <li dojoType="dijit.MenuItem" onClick="alert('Hello world');">
                        Enabled Item
                    </li>
                    <li dojoType="dijit.MenuItem" disabled="true">
                        Disabled Item
                    </li>
                    <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('not actually cutting anything, just a test!')">
                        Cut
                    </li>
                    <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('not actually copying anything, just a test!')">
                        Copy
                    </li>
                    <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" onClick="alert('not actually pasting anything, just a test!')">
                        Paste
                    </li>
                    <li dojoType="dijit.PopupMenuItem">
                        <span>Enabled Submenu</span>
                        <ul dojoType="dijit.Menu" id="submenu2">
                            <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">
                                Submenu Item One
                            </li>
                            <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">
                                Submenu Item Two
                            </li>
                            <li dojoType="dijit.PopupMenuItem">
                                <span>Deeper Submenu</span>
                                <ul dojoType="dijit.Menu" id="submenu4">
                                    <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">
                                        Sub-sub-menu Item One
                                    </li>
                                    <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">
                                        Sub-sub-menu Item Two
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li dojoType="dijit.PopupMenuItem" disabled="true">
                        <span>Disabled Submenu</span>
                        <ul dojoType="dijit.Menu" id="submenu3" style="display: none;">
                            <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">
                                Submenu Item One
                            </li>
                            <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">
                                Submenu Item Two
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>
<script src="./js/dojo/dojo.js">
</script>
<script type="text/javascript">
    
    dojo.require("dijit.Tree");
    
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.dijit");
    dojo.require("dijit.ColorPalette");
    dojo.require("dijit.Menu");
    dojo.require("dojo.parser");
    dojo.ready(function(){
    
    
    
    });
    
    dojo.ready(function(){
        /*
         * it's the best to perform the parse time, in case we'll manipulate the dom before doc ready
         */
        dojo.parser.parse();
    });
</script>
